//会员管理
<template>
  <div class="carousel_index">
    <div class="carousel_home">
      <!-- 表头 -->
      <p class="carousel_header">
        <span class="car_text">用户昵称</span>
        <input
          type="text"
          class="car_select"
          placeholder="用户昵称"
          v-model="user_name"
        />
        <span class="car_text">状态</span>
        <select
          name=""
          id=""
          aria-placeholder="状态"
          class="car_select"
          v-model="serch_status"
        >
          <option value="1">启用</option>
          <option value="0">禁用</option>
        </select>
        <el-button type="primary" :size="size" @click="onSerch()"
          ><svg
            class="pd"
            t="1668948707527"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1430"
            width="16"
            height="16"
          >
            <path
              d="M474.9 880.6C249.5 880.6 66.2 697.3 66.2 472S249.5 63.4 474.8 63.4 883.5 246.7 883.5 472 700.2 880.6 474.9 880.6z m0-776.1c-202.6 0-367.5 164.8-367.5 367.5 0 202.6 164.8 367.5 367.5 367.5S842.3 674.6 842.3 472 677.5 104.5 474.9 104.5z"
              fill="#fff"
              p-id="1431"
            ></path>
            <path
              d="M937.7 960.2c-5.3 0-10.5-2-14.6-6L733.1 764c-8-8-8-21.1 0-29.1s21.1-8 29.1 0L952.3 925c8 8 8 21.1 0 29.1-4 4.1-9.3 6.1-14.6 6.1z"
              fill="#fff"
              p-id="1432"
            ></path>
          </svg>
          搜索
        </el-button>
        <el-button type="" :size="size"
          ><svg
            t="1668948938318"
            class="pd"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2569"
            width="16"
            height="16"
          >
            <path
              d="M928.16 144H736V64a32 32 0 0 0-32-32H320a32 32 0 0 0-32 32v80H95.84a32 32 0 0 0 0 64H129.6l77.92 698.656A96 96 0 0 0 302.912 992h418.144a96.032 96.032 0 0 0 95.424-85.344L894.4 208h33.728a32 32 0 0 0 0.032-64zM352 96h320v48H352V96z m400.896 803.552a32 32 0 0 1-31.808 28.448H302.912a32 32 0 0 1-31.808-28.448L193.984 208h636.032l-77.12 691.552z"
              p-id="2570"
            ></path>
            <path
              d="M608 820.928a32 32 0 0 0 32-32V319.104a32 32 0 0 0-64 0v469.824a32 32 0 0 0 32 32zM432 820.928a32 32 0 0 0 32-32V319.104a32 32 0 0 0-64 0v469.824a32 32 0 0 0 32 32z"
              p-id="2571"
            ></path></svg
          >清空</el-button
        >
      </p>
      <!-- 表格 -->
      <avue-crud
        :data="data"
        v-model:page="page"
        :option="option"
        class="carousel_table"
        @on-load="onLoad"
      >
        <template #menu="{ row, index, size }">
          <el-button
            type="primary"
            :size="size"
            icon="el-icon-edit"
            @click="onedit(row, index)"
            >编辑</el-button
          >
        </template>
      </avue-crud>
      <!-- 弹框组件 -->
      <el-dialog
        v-model="dialogVisible"
        title="修改"
        width="30%"
        :before-close="handleClose"
      >
        <div>
          <p>
            <span>用户头像</span>
            <img :src="imgs">

          </p>
          <p>
            <span>用户昵称</span>
            <input type="text" class="user_name" v-model="user_name" />
          </p>
          <p class="status">
            <span class="status_text">状态</span>
            <avue-radio
              class="bianh"
              v-model="user_status"
              :dic="dic"
            ></avue-radio>
          </p>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="Confirm_edit()"> 确认 </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import "./index.css";
import request from "../../../utils/request";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      imgs:"",
      dialogVisible: false,
      dialogVisible1: false,
      numss: 1,
      userId: "",
      serch_name: "",
      serch_status: 0,
      page: {
        pageSize: 10,
      },
      listLength: 0,
      data: [],
      list: [],
      dic: [
        {
          label: "正常",
          value: 1,
        },
        {
          label: "禁用",
          value: 0,
        },
      ],
      option: {
        // selection: true,
        delBtn: false,
        editBtn: false,
        align: "center",
        menuAlign: "center",
        border: true,
        delBtn: false,
        addBtn: false,
        user_status: "",
        user_name: "",
        column: [
          {
            label: "用户昵称",
            prop: "nickName",
          },
          {
            label: "用户头像",
            html: true,
            formatter: (val) => {
              return val.pic
                ? `<img src='${val.pic}' width="100" height="100" />`
                : "";
            },
          },
          {
            label: "启用状态",
            html: true,
            formatter: (val) => {
              return val.status == 1
                ? '<span class="status1">启用</span>'
                : "<span class='status2'>禁用</span>";
            },
          },
          {
            label: "注册时间",
            prop: "modifyTime",
          },
        ],
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    onLoad(page) {
      //模拟分页
      let LENGTH = localStorage.getItem("listLength");
      this.page.total = Number(LENGTH);
      this.numss = this.page.currentPage;
      this.getList();
    },
    onedit(row) {
      console.log(row)
      this.dialogVisible = true;
      this.user_status = row.status;
      this.user_name = row.nickName;
      this.userId = row.userId;
      this.imgs=row.pic;
    },
    async getList() {
      let res = await request.get(
        `admin/user/page?t=1669008990324&current=${this.numss}&size=10`
      );
      this.data = res.data.records;
      this.list = res.data.records;
      this.listLength = res.data.total;
      localStorage.setItem("listLength", this.listLength);
    },
    async Confirm_edit() {
      this.dialogVisible = false;
      let res = await request.put("/admin/user", {
        userId: this.userId,
        status: this.user_status,
        nickName: this.user_name,
      });
      this.getList();
      if (res.status === 200) {
        ElMessage({
          message: "修改成功",
          type: "success",
        });
      } else {
        ElMessage.error("修改失败");
      }
    },
    onSerch() {
      this.data = this.list.filter((item) => {
        return (
          item.nickName.includes(this.user_name) &&
          item.status == this.serch_status
        );
      });
      this.listLength = this.data.length;
      localStorage.setItem("listLength", this.listLength);
      let LENGTH = localStorage.getItem("listLength");
      this.page.total = Number(LENGTH);
    },
  },
};
</script>
<style scoped>
@import url("./index.css");
</style>